finxol.io
1<script setup>
2import A from "@/components/content/ProseA.vue";
3
4const route = useRoute();
5const { data: page } = await useAsyncData(route.path, () =>
6 queryCollection("pages").path(`/pages${route.path}`).first()
7);
8
9useSeoMeta({
10 title: page.value?.title,
11 description: page.value?.description
12});
13</script>
14
15<template>
16 <div
17 v-if="page"
18 class="py-8"
19 >
20 <h1
21 class="text-3xl font-bold text-gray-900 dark:text-gray-200 sm:text-4xl md:text-5xl lg:text-6xl"
22 >
23 {{ page.title }}
24 </h1>
25
26 <ContentRenderer
27 :value="page"
28 :class="[
29 'prose prose-lg prose-slate dark:prose-invert',
30 'max-w-none mx-auto',
31 'mt-6',
32 ]"
33 />
34 </div>
35
36 <div v-else>
37 <article class="grid place-items-center gap-6 mt-12">
38 <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-200">It seems you might be lost...</h2>
39 <p class="text-gray-500 dark:text-gray-400">Please check the URL and try again.</p>
40
41 <div></div>
42
43 <div class="flex flex-row gap-2 items-baseline">
44 <A href="/" target="_self" class="text-lg">
45 Take me home!</A>
46 <span class="text-gray-500 dark:text-gray-400 text-sm">(country roads)</span>
47 </div>
48 </article>
49 </div>
50</template>